<template>
  <div class="m-25 mt-65 agora">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>打卡记录</h2>
        </div>
      </div>

      <!-- 搜索 -->
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
            <Input class="mr-10" v-model="queryData.name" placeholder="姓名"  :clearable=true style="width: 200px"/>
            <Input class="mr-10" v-model="queryData.phone" placeholder="手机号" :clearable=true style="width: 200px"/>
            <Button class="mr-10" type="primary" custom-icon="iconfont icon-chaxun" :clearable=true size="small" @click="getTableData">查找</Button>
        </div>
        </Card>

      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table
              border
              :columns="list.columns"
              :data="list.tableData"
            ></Table>
          </div>
          <div>
            <Page
              :total="queryData.totalRecord"
              :page-size="queryData.limit"
              :current="queryData.page"
              show-total
              show-elevator
              @on-change="changePage"
            ></Page>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import gcDispenserApi from '@/api/base_sys/gcDispenser.js'
import { Message } from 'iview'

export default {
  data () {
    return {
      url: '/api/VoRecord/',

      list: {
        selections: [],
        // 列表展示数据
        tableData: [],
        columns: [
          {
            title: '序号',
            key: 'id',
            align: 'center',
            minWidth: 10
          },
          {
            title: '打卡人',
            key: 'name',
            align: 'center',
            minWidth: 50
          },
          {
            title: '电话',
            key: 'phone',
            align: 'center',
            minWidth: 100
          },
          {
            title: '照片',
            key: 'picUrl',
            align: 'center',
            minWidth: 50
          },
          {
            title: '经度',
            key: 'mapY',
            align: 'center',
            minWidth: 50
          },
          {
            title: '纬度',
            key: 'mapX',
            align: 'center',
            minWidth: 50
          },
          {
            title: '打卡时间',
            key: 'createTime',
            align: 'center',
            minWidth: 100
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 80,
            render: (h, p) => {
              return h('div', [
                h('i-button', {
                  props: { type: 'error', size: 'small' },
                  style: { margin: '0 3px' },
                  on: {
                    click: () => { this.dele(p.row.id) }
                  }
                }, '删除')
              ])
            }
          }
        ]
      },

      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: '', // 任务名称
        phone: '' // 任务状态
      }

    }
  },
  created () {
    this.getTableData()
  },

  methods: {
    // 获取列表
    async getTableData () {
      console.log(this.queryData)
      this.queryData.totalRecord = undefined
      let result = (await gcDispenserApi.getData(this.url + 'page', this.queryData)).data
      console.log('result:', result)
      this.list.tableData = result.list
      this.queryData.totalRecord = result.totalRecord
      this.queryData.limit = result.pageSize
    },
    // 分页切换
    changePage (index) {
      this.queryData.page = index
      this.getTableData()
    },
    // 查询
    inQuire () {
      this.queryData.page = 1
      this.getTableData()
    },
    all () {
      this.queryData.name = ''
      this.queryData.phone = ''
      this.getTableData()
    },
    async dele (index) {
      // console.log('dele',index);
      let result = await gcDispenserApi.del(this.url + index)
      if (result.data) {
        this.$Message.success('操作成功')
        console.log(result)
        this.getTableData()
      } else {
        console.log(result)
        this.$Message.error(result.message)
      }
    }
  }
}
</script>
